<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>信件查询 - ${site.seoTitle} - Powered by JPROCMS</title>
    [#include '../includes/common_res.html'/]
    <link
      rel="stylesheet"
      href="${resource}/static/plugins/aj-captcha/css/verify.css"
    />
    <script src="${resource}/static/plugins/crypto-js/crypto-js.min.js"></script>
    <script src="${resource}/static/plugins/sm-crypto/dist/sm2.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/crypto-js.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/ase.js"></script>
    <script src="${resource}/static/plugins/aj-captcha/js/verify.js"></script>
  </head>
  <body>
    [#assign shadowNav=true/] [#include '../includes/header.html'/]
    <div class="container">
      <div class="row">
      <!--左侧--->
      [#include '../includes/inc_letter_left.html'/]
      <!--右侧--->
        <div class="col-9 content-area p-5">
        <!-- 主内容区 -->
          <form
            id="validForm"
            action="${base}/letter/query/result"
            method="post"
            class="bg-light p-3 mb-3"
          >
            <div class="form-group row">
              <label for="letterNo" class="col-sm-2 col-form-label"
                >信件编号<strong class="text-danger">*</strong></label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="letterNo"
                  name="letterNo"
                  maxlength="150"
                  title="请填写信件编号"
                  required
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="queryPass" class="col-sm-2 col-form-label"
                >查询密码<strong class="text-danger">*</strong></label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="queryPass"
                  name="queryPass"
                  maxlength="150"
                  title="请填写查询密码"
                  required
                />
              </div>
            </div>
            <div id="captcha-containerId"></div>
            <input type="hidden" name="captchaVerification" id="captchaVerification"/>
            <button type="button" id="letterQuerySubmit" class="btn btn-primary">查询</button>
          </form>
        </div>
      </div>
    </div>
    [#include '../includes/footer.html'/] 
    [#include '../includes/inc_msg.html'/]
<script>
  $(function () {
    $("#title").focus().select();
    //验证码
    $("#captcha-containerId").slideVerify({
      baseUrl: "${base}", //服务器请求地址;
      containerId: "letterQuerySubmit", //pop模式 必填 被点击之后出现行为验证码的元素id
      mode: "pop", //展示模式
      imgSize: {
        //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
        width: "400px",
        height: "200px",
      },
      barSize: {
        //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
        width: "400px",
        height: "40px",
      },
      beforeCheck: function () {
        //检验参数合法性的函数  mode ="pop"有效
        let flag = true;
        //实现: 参数合法性的判断逻辑, 返回一个boolean值
        return flag;
      },
      ready: function () {}, //加载完毕的回调
      success: function (params) {
        //成功的回调
        // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
        //例如: login($.extend({}, params))
        $("#captchaVerification").val(params.captchaVerification);
        console.log("captchaVerification->",captchaVerification)
        $("#validForm").submit();
      },
      error: function () {
        console.log("error->",error) 

        alertTip("验证码错误");
      }, //失败的回调
    });
  });
</script>
</body>
</html>
